<template>
  <div class="bg-jinjie-blue h-screen ml-1 text-white pl-2 pt-2">
    <h3>第7章以来案例一览</h3>
    <span
      >当前导航展示了动态组件（component）的用法，点击导航按钮可以切换不同的案例</span
    ><br />
    <button
      v-for="(_, tab) in tabs"
      :key="tab"
      :class="['tab-button', { active: currentTab === tab }]"
      @click="currentTab = tab"
    >
      {{ tab }}
    </button>
    <hr />
    <!-- <TransitionGroup name="fade" mode="out-in">
      <keep-alive>
        <component :is="tabs[currentTab]" class="tab"></component>
      </keep-alive>
    </TransitionGroup> -->
    <KeepAlive exclude="7.5.2App" max="10">
      <component :is="tabs[currentTab]" class="tab"></component>
    </KeepAlive>
  </div>
</template>

<script setup>
import { ref } from "vue";
import App722 from "@/components/chapter08/callers/7.2.2App.vue";
import App723 from "@/components/chapter08/callers/7.2.3App.vue";
import App724 from "@/components/chapter08/callers/7.2.4App.vue";
import App730 from "@/components/chapter08/callers/7.3.0App.vue";
import App7312 from "@/components/chapter08/callers/7.3.12App.vue";
import App740 from "@/components/chapter08/callers/7.4.0App.vue";
import App751 from "@/components/chapter08/callers/7.5.1App.vue";
import App752 from "@/components/chapter08/callers/7.5.2App.vue";
import App762 from "@/components/chapter08/callers/7.6.2App.vue";
import App81 from "@/components/chapter08/callers/8.1App.vue";
import App84 from "@/components/chapter08/callers/8.4App.vue";
import App861 from "@/components/chapter08/callers/8.6.1App.vue";
import App862 from "@/components/chapter08/callers/8.6.2App.vue";
import App863 from "@/components/chapter08/callers/8.6.3App.vue";
import App872 from "@/components/chapter08/callers/8.7.2App.vue";
import App88 from "@/components/chapter08/callers/8.8_App.vue";

// 设置默认激活的案例
const currentTab = ref("App88");

// 把案例组件组织为tabs对象
const tabs = {
  App88,
  App722,
  App723,
  App724,
  App730,
  App7312,
  App740,
  App751,
  App752,
  App762,
  App81,
  App84,
  App861,
  App862,
  App863,
  App872,
};
</script>

<style scoped>
.jinjie {
  background-color: #2e3b4e;
  color: #ddd;
  font-family: Arial, sans-serif;
}

.intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.priority {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.yuan {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 1px solid;
  margin-right: 10px;
}

.red {
  background-color: #ff007f;
}
.green {
  background-color: #00ff7f;
}
.blue {
  background-color: #007fff;
}

hr {
  border: 1px solid lightgray;
  margin-bottom: 10px;
}

.taskInput {
  width: 80%;
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-radius: 5px;
  outline: none;
}

button {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background-color: #ff007f;
  color: #fff;
  cursor: pointer;
  margin-left: 10px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 10px;
  border-bottom: 1px solid #444;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #34495e;
  margin-bottom: 5px;
}

.task-text {
  flex-grow: 1;
  margin-right: 10px;
}

.task-text input {
  width: 100%;
  border: none;
  background: transparent;
  color: #ddd;
}

.actions span {
  margin-left: 10px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
}

.edit {
  color: #b75cff;
}

.delete {
  color: #ff007f;
}

.tab-button {
  margin-top: 6px;
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  margin-bottom: -1px;
  margin-right: -1px;
}

.tab-button:hover {
  background: green;
}

.tab-button.active {
  background: green;
}

.tab {
  border: 1px solid #ccc;
  padding: 10px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
